<template>
  <div class="preferences-set-container">
    <div
      class="preferences-set-icon display-flex flex-align flex-justify"
      @click="handleOpenDrawer"
    >
      <core-set-icon></core-set-icon>
    </div>

    <el-drawer
      v-model="drawerVisible"
      size="384px"
      :show-close="false"
      class="preferences-set-drawer"
      append-to-body
    >
      <template #header>
        <drawer-header @close="drawerVisible = false"></drawer-header>
      </template>
      <drawer-content></drawer-content>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import DrawerHeader from './components/drawer-header/index.vue'
import DrawerContent from './components/drawer-content/index.vue'
import { ref } from 'vue'

const drawerVisible = ref(false)

const handleOpenDrawer = () => {
  drawerVisible.value = true
}

defineOptions({
  name: 'CorePreferences'
})
</script>

<style scoped lang="scss">
.preferences-set-container {
  .preferences-set-icon {
    width: var(--core-header-tools-size);
    height: var(--core-header-tools-size);
    color: var(--core-text-color-05);
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      color: var(--core-text-color-03);
      background-color: var(--core-bg-color-04);
    }
  }
}
</style>

<style lang="scss">
.preferences-set-drawer {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0;
  }

  .el-drawer__body {
    padding: 0;
  }
}
</style>
